<template>
  <div id="Statistics">
    <div class="content">
      <div class="overflow-auto">
        <div class="Statistics_body">
          <div class="StatisticsData">

            <!-- 筛选 -->
            <div class="screen">
              <div class="screen_left">
                <div class="screen_datepicker screen_datepicker_action">
                  <el-date-picker size="small" style="width: 320px;" v-model="screenDate" type="daterange"
                    range-separator="至" @change="screenDateChange" start-placeholder="开始日期" end-placeholder="结束日期"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                  <i class="el-icon-date"></i> <!-- 替换为你的图标 -->
                </div>
                <div class="marginLeft">
                  <el-select v-model="value_channel" placeholder="请选择" size="small" style="width: 150px;">
                    <el-option v-for="item in options_channel" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="marginLeft">
                  <el-select v-model="value_status" placeholder="请选择" size="small" style="width: 150px;">
                    <el-option v-for="item in options_status" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="marginLeft">
                  <el-input style="width: 374px;" size="small" v-model="searchValue"
                    placeholder="姓名/手机号/订单号/渠道订单号/房间号/备注">
                    <!-- @blur="search" -->
                    <!-- @click="search" -->
                    <i style="color:black;" slot="suffix" class="el-input__icon el-icon-search" color="black"></i>
                  </el-input>
                </div>

                <div class="marginLeft">
                  <el-button type="text" size="small" @click="resetting">重置筛选</el-button>
                </div>

              </div>
              <el-button type="primary" size="small" @click="openExport">报表导出</el-button>
            </div>
            <!-- END筛选 -->
            <!-- 表格 -->
            <div class="CollectionRecode">
              <div class="eltable" :style="{ height: maxHeight_eltable + 'px' }">
                <el-table :data="tableData" ref="exportTable" style="width: 100%;font-size: 14px;"
                  :max-height="maxHeight_table" :header-cell-style="{ background: '#EBF1F6' }">
                  <!-- <template slot="header">
                      <div>{{ item }}</div>
                    </template> -->
                  <el-table-column prop="create_time" label="订单开始时间" align="center" />
                  <el-table-column prop="order_no" label="关联订单" align="center">
                    <template slot-scope="scope">
                      <div style="color: #0486FE;">{{ scope.row.order_no }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="room" label="房间信息" align="center" />
                  <el-table-column prop="name" label="客户姓名" align="center" />
                  <el-table-column prop="phone" label="手机号" align="center" />
                  <el-table-column prop="status" label="订单状态" align="center" />
                  <el-table-column prop="channel_id" label="订单来源" align="center" />
                  <el-table-column prop="stay_time" label="入住时间" align="center" />
                  <el-table-column prop="leave_time" label="离店时间" align="center" />
                  <el-table-column prop="order_price" label="应收金额" align="center" />
                  <el-table-column prop="pay_price" label="实收金额" align="center" />
                  <el-table-column prop="pay_type" label="收款方式" align="center" />
                </el-table>
                <!-- 分页 -->
                <div class="pagination">
                  <pagination :data="pageNation_data" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                  </pagination>
                </div>
              </div>
            </div>

            <!-- 导出报表 -->
            <ExportTable now_export="消费明细" :tableHeaders="tableHeaders" :tableScreen="tableScreen"
              :drawerVisible_Table="drawerVisible_Table" @update:drawerVisible_Table="handleDrawerVisible_Table">
            </ExportTable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '../../../../components/PaginationPage/Pagination.vue'
import ExportTable from '../../../../components/exportTable/exportTable.vue'
import { getdaysAgo } from '../../../../api/countDay'
export default {
  name: 'Statistics',
  components: {
    Pagination, ExportTable
  },
  data() {
    return {
      // 导出报表组件
      drawerVisible_Table: false,
      tableHeaders: [],//表格的所有表头
      tableScreen: [],//表格筛选字段

      isScreenDate: false,//是否筛选了时间
      isScreenDateType: 0,//类型 1代表，用户选择的时间相同，0代表用户选择的时间不同
      screenDate: [getdaysAgo(new Date(), 1, true), getdaysAgo(new Date(), 1, true)],//筛选时间
      tableHeaderData: [],//营业明细表格
      tableData: [],//营业明细表格

      // 选择器  
      options_channel: [{
        value: '0',
        label: '全部来源渠道'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      options_status: [{
        value: '0',
        label: '全部订单状态'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value_channel: '0',
      value_status: '0',
      search_type: '',//搜索类型 订单号:order_no 客户姓名:name 手机号:phone
      searchValue: '',//搜索值

      maxHeight_eltable: window.innerHeight - 180,//
      maxHeight_table: window.innerHeight - 250,//表格最大高度
      pageNation_data: {
        total: 0,
        currentPage: 1,
        currentSize: 10,
        small: false
      },// 传递分页组件的数据
    }
  },
  created() {
    this.getInit()
  },
  mounted() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 移除窗口大小变化的监听
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    /**
     * 导出明细按钮
     */
    openExport() {
      // if (this.tableData.length == 0) {
      //   this.$message.warning('没有可导出的数据！')
      //   return
      // }
      const tableHeaders = Array.from(this.$refs.exportTable.$el.querySelectorAll('th')).map(header => header.innerText).filter(item => item != '');

      const tableScreen = [
        ['开始时间', this.screenDate[0] ? this.screenDate[0] : '全部', this.screenDate[0]],
        ['结束时间', this.screenDate[1] ? this.screenDate[1] : '全部', this.screenDate[1]],
      ]
      console.log(tableHeaders, 'tableHeaders');
      console.log(tableScreen, 'tableScreen');
      this.tableHeaders = tableHeaders  // 报表字段
      this.tableScreen = tableScreen  // 筛选字段
      this.drawerVisible_Table = true;
    },
    // 更新父组件的抽屉状态 导出明细
    handleDrawerVisible_Table(value) {
      this.drawerVisible_Table = value;
    },


    // 重置筛选
    resetting() {
      this.searchValue = ''
      this.search_type = ''
      this.value_status = '0'
      this.value_channel = '0'
      this.screenDate = [getdaysAgo(new Date(), 1, true), getdaysAgo(new Date(), 1, true)]
      this.getInit()
    },
    // f分页组件
    handleSizeChange(val) {
      // 处理每页数量改变的逻辑
      console.log(`每页 ${val} 条`);
      this.pageNation_data.currentSize = val
      this.getInit()
    },
    handleCurrentChange(val) {
      // 处理当前页码改变的逻辑
      console.log(`当前页: ${val}`);
      this.pageNation_data.currentPage = val
      this.getInit()
    },
    // 监听窗口大小变化
    handleResize() {
      // 在这里处理窗口大小变化的逻辑
      let screenHeight = window.innerHeight;
      this.maxHeight_eltable = screenHeight - 180
      this.maxHeight_table = screenHeight - 250
    },


    // 筛选日期时间发生变化
    screenDateChange() {
      if (this.screenDate) {
        this.isScreenDate = true//代表已经筛选了时间  false时代表默认进来时获取的数据日期为当前日期
        if (this.screenDate[0] == this.screenDate[1]) {
          this.isScreenDateType = 1//选择时间相同，则获取该日期前七天的日期作为明细的开始时间
        } else {
          this.isScreenDateType = 0
        }
      }
      console.log(this.screenDate, 'screenDate');
      this.getInit()
    },

    // 获取数据   订单明细列表数据
    getInit() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        start_date: this.screenDate[0],
        end_date: this.screenDate[1],
        search_word: this.searchValue,//	搜索关键字
        search_type: '',//搜索类型 订单号:order_no 客户姓名:name 手机号:phone
        channel_id: this.value_channel,//	渠道id
        order_status: this.value_status,



      }
      console.log(data, '消费明细列表数据data');
      this.my_request('supplier/statistics/consume', data, "GET").then(res => {
        console.log(res, '消费明细列表数据');
        let { code, data } = res.data
        if (code === 200) {
          this.tableData = data.list
        }
      })
    },



  }
}
</script>


<style lang="scss" scoped>
.eltable {
  border: 1px solid #E4E7ED;
}

.screen {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .screen_left {
    display: flex;

    .marginLeft {
      margin-left: 15px;
    }

  }
}

.CollectionRecode {
  margin-top: 20px;
  position: relative;

  .pagination {
    width: 100%;
    height: 30px;
    padding: 20px 0;
    position: absolute;
    bottom: 0;
    right: 10px;
  }

  .eltable {
    background-color: white;
  }
}

.content {
  .overflow-auto {
    width: calc(100vw - 190px);
    height: calc(100vh - 100px);
    overflow: auto;
    padding: 20px;

    .Statistics_body {
      width: 100%;
    }
  }
}
</style>
<!-- 日期选择器样式 -->
<style lang="scss" scoped>
.screen_datepicker_action {
  ::v-deep .el-input__inner::before {
    content: '筛选时间';
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    text-align: center;
    color: #333333;
    font-size: 13px;
  }
}

::v-deep .el-input__icon.el-range__icon.el-icon-date {
  display: none;
}

::v-deep .el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange.el-range-editor--small {
  padding-left: 70px;
}

.screen_datepicker {
  position: relative;
  width: 320px;
  height: 32px;
}

.screen_datepicker i {
  position: absolute;
  right: 5px;
  z-index: 7;
  color: black;
  line-height: 32px;
}
</style>